<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理员管理界面</title>
<!-- 下载并引入jquery easyUI -->
<link rel="stylesheet" type="text/css"
	href="../../js/jquery-easyui-1.9.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="../../js/jquery-easyui-1.9.5/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="../../js/jquery-easyui-1.9.5/themes/color.css">
<script type="text/javascript"
	src="../../js/jquery-easyui-1.9.5/jquery.min.js"></script>
<script type="text/javascript"
	src="../../js/jquery-easyui-1.9.5/jquery.easyui.min.js"></script>
</head>
<body>

	<!--  数据表格开始    -->
	<table id="user_dg" title="管理员信息" class="easyui-datagrid"
		style="width: 100%; height: 100%" url="../sysuser/list"
		toolbar="#user_toolbar" rownumbers="true" pagination="true"
		fitColumns="true" singleSelect="true" data-options="fit:true">
		<thead>
			<tr>
				<th field="userNo" width="50">用户编号</th>
				<th field="userName" width="50">用户账号</th>
				<th field="nickName" formatter="stringFormatter" width="50">昵称</th>
				 <!-- 使用easyui提供的格式化化插件处理数据的显示 -->
				<th field="password" formatter="passwordFormatter" width="50">密码</th>
				<th field="userPhone" width="50">电话</th>
				<th field="userEmail" width="50">邮箱</th>
				<th field="userDate" width="50">注册时间</th>
			</tr>
		</thead>
	</table>
	<div id="user_toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
			onclick="newUser()">新增</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-edit" plain="true" onclick="editUser()">修改</a> <a
			href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
			onclick="destroyUser()">删除</a>
	</div>
    <!--  数据表格结束   -->
    
    <!-- 新增和修改对话框开始 -->
     <!-- 修改每个组件的id号，增加模块标志信息 -->
     <div id="user_dlg" class="easyui-dialog" style="width:400px;height:290px;padding:10px 20px"
		closed="true" buttons="#user_dlg-buttons">
	<div class="ftitle">用户信息</div>
	<form id="user_fm" method="post">
		<div class="fitem">
			<label>用户账号:</label>
			<input name="userName"  class="easyui-validatebox"   prompt="请输入用户账号"  required="true">
		</div>
		<div class="fitem">
			<label>昵&emsp;&emsp;称:</label>
			<input name="nickName" class="easyui-textbox" >
		</div>
		<div class="fitem">
			<label>密&emsp;&emsp;码:</label>
			<input name="password"   class="easyui-passwordbox" prompt="密码不能为空" iconWidth="28" >
		</div>
		<div class="fitem">
			<label>电&emsp;&emsp;话:</label>
			<input name="userPhone" class="easyui-textbox">
		</div>
		
		<div class="fitem">
			<label>邮&emsp;&emsp;箱:</label>
			<input name="userEmail" class="easyui-validatebox" data-options="required:true,validType:'email'">
		</div>
		
		
		<div class="fitem">
			<label>注册时间:</label>
			<input name="userDate" class="easyui-datebox" data-options="required:true">
		</div>
	</form>
	</div>
	<div id="user_dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" 
		     onclick="javascript:$('#user_dlg').dialog('close')">取消</a>
	</div>
	
  <!-- 新增和修改对话框结束-->
  <script type="text/javascript">
  //框架进阶：1.能使用框架，2.能扩展框架，3.能修改框架，4.能设计框架
  //修改easyUI组件的时间格式-时间格式化器-把时间对象转换为字符串
  $.fn.datebox.defaults.formatter = function(date){
		var y = date.getFullYear();
		var m = date.getMonth()+1;
		var d = date.getDate();
		return y+'-'+m+'-'+d;
	}
  //时间解析器：把字符串转换为javascript的时间对象
  $.fn.datebox.defaults.parser = function(s){
		var t = Date.parse(s);
		if (!isNaN(t)){
			return new Date(t);
		} else {
			return new Date();
		}
	}
  
  function stringFormatter(value,row,index){
	  
	  if(value){
		  return value;
	  }else {
		  return "<font  style='color:red'>未填写</font>";
	  }
  }

  //easyui的格式化器的编写
  function passwordFormatter(value,row,index){
	  	//使用星号代替要显示的密码
	    return   "***";
  }
  
  
  
   //点击数据表上的新增按钮，会调用这个方法
   function newUser(){
	    //打开新增对话框
		$('#user_dlg').dialog('open').dialog('setTitle','新增管理员');
		//新增对话框包含了一个form表单，可能存在多次打开，这里对表单进行清空操作
		$('#user_fm').form('clear');
		//设置新增数据时提交到服务器的url地址
		url = '../sysuser/add';
	}


   function editUser(){
	   var row = $('#user_dg').datagrid('getSelected');
	   if (row){
	   	$('#user_dlg').dialog('open').dialog('setTitle','编辑用户信息');
	   	$('#user_fm').form('load',row);
	   	   url = '../sysuser/edit?userNo='+row.userNo;
	   }else{
		   $.messager.show({
				title: 'Error',
				msg: "请选择要修改的用户信息"
			});
	  }
	}


   function saveUser(){
		$('#user_fm').form('submit',{
			url: url,
			onSubmit: function(){
				return $(this).form('validate');//提交表单前先进行表单数据验证，验证通过才提交数据到服务器；验证失败不提交数据
			},
			success: function(result){//收到服务器响应的json字符串后，调用这里的代码  -- 回调函数，当浏览器收到服务器返回的数据后才执行
				var result = eval('('+result+')');
				if (!result.success){
					//新增失败，使用消息框提示错误信息
					$.messager.show({
						title: 'Error',
						msg: result.errorMsg
					});
				} else {
					$('#user_dlg').dialog('close');		// 新增成功，关闭新增对话框
					$('#user_dg').datagrid('reload');	// 新增成功，刷新列表数据
				}
			}
		});
	}



   function destroyUser(){
		var row = $('#user_dg').datagrid('getSelected');
		if (row){
			$.messager.confirm('Confirm','确定删除用户?误删今晚加班!',function(r){
				if (r){
					$.post('../sysuser/delete',{userNo:row.userNo},function(result){
						if (result.success){
							$('#user_dg').datagrid('reload');	// reload the user data
						} else {
							$.messager.show({	// show error message
								title: 'Error',
								msg: result.errorMsg
							});
						}
					},'json');
				}
			});
		}
	}
	
  </script>
      
</body>
</html>